<template>
  <div class="model_bgc">
    <HeaderComponent title="" background='#00000000' color='#000000' image_='1' size='4.8vw' />
    <div class="luckyBox">
      <div class="Diamonds" v-for="(list,indexs) in luckBox" :key="indexs">
        <div>{{list.giftName}}</div>
        <div class="one_diamonds">
          <img :src="list.icon" alt="" />
          <div class="dia_lis">
            <img :src="require('@/assets/images/lucky_box/Group.png')" alt="" />
            <div>{{list.money}}</div>
          </div>
        </div>
        <div class="list_miaomi">
          <div class="box_dia" v-for="(item,index) in list.treeGift" :key="index">
            <div class="one_tubiao">
              <img :src="item.icon" alt="" />
              <div class="list_text">{{item.name}}</div>
            </div>
            <div class="text_biaoti">
              <img :src="require('@/assets/images/lucky_box/Group.png')" alt="" />
              <div>{{item.money}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="explain">
        <div>1、用户送出后随机送出相应魔盒内礼物</div>
        <div>2、一旦送出无法撤回操作，请谨慎操作</div>
        <div>3、此玩法仅限打赏使用，不可过度消费</div>
        <div>4、法律范围内解释权归声贝所有</div>

      </div>
      <div class="interpretation">本活动最终解释权归官方所有</div>
    </div>
  </div>

</template>

<script lang="ts">
import { defineComponent, ref } from "vue"
import { giftGiftList } from '@/api/activity'
import HeaderComponent from '@/components/header_component/HeaderComponent.vue'
export default defineComponent({
    components: {
        HeaderComponent
    },
    setup () {
        const luckBox = ref<Array<any>>([])
        const getData = async (): Promise<void> => {
            const dataRes = await giftGiftList({})
            if (dataRes.data.status === 0) {
                luckBox.value = dataRes.data.result.boxGift
            }
        }
        getData()
        return {
            luckBox
        }
    }
})
</script>

<style lang="less" scoped>
@import './LuckyBox.less';
</style>